<template>
	<view class="addressList-wrap" v-if="inquiry">
		<view class="addressList-item" v-for="(item, index) in dataList" :key="index" @click="selectAddress(item)">
			<view class="addressList-item-default" v-if="item.isDefault">默认</view>
			<view class="addressList-item-layer">
				<view class="addressList-item-info">
					<view class="item-info-top">
						<view class="item-info-name">{{ item.name }}</view>
						<view class="item-info-phone">{{ item.mobile }}</view>
					</view>
					<view class="item-info-address">{{ item.province + item.city + item.district + item.address }}</view>
				</view>
				<view class="addressList-item-cut"></view>
				<image
					class="addressList-item-edit"
					@click.stop="gotoRouter('/pages-client/member/addressInfo?id=' + item.id)"
					src="https://cdn.quantifynet.cn/dti/updates@2x.png"
				></image>
			</view>
		</view>

		<u-empty-state v-if="dataList.length == 0" value="你还没有添加地址"></u-empty-state>

		<u-bottom-button value="添加地址" @click="gotoRouter('/pages-client/member/addressInfo')"></u-bottom-button>
	</view>
</template>

<script>
import uBottomButton from '@/components/u-bottom-button/u-bottom-button.vue';
import uEmptyState from '@/components/u-empty-state/u-empty-state.vue';
import { mapState, mapMutations } from 'vuex';
export default {
	components: {
		uEmptyState,
		uBottomButton
	},
	data() {
		return {
			pageType: null, // null展示模式  1选择模式
			id: null,
			dataList: null
		};
	},
	onLoad(option) {
		this.pageType = option.type ? option.type : null;
	},
	onShow() {
		this.queryAddressList();
	},
	methods: {
		...mapMutations({
			setUserAddress: 'setUserAddress'
		}),

		//选择地址
		selectAddress(item) {
			if (this.pageType == 1) {
				this.setUserAddress(item);
				uni.navigateBack({
					delta: 1
				});
			}
		},

		//地址列表
		queryAddressList() {
			this.$api.queryAddressList({}).then(res => {
				if (res.code == 200) {
					this.dataList = res.result;
					console.log(this.dataList);
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none'
					});
				}
			});
		}
	}
};
</script>

<style lang="less">
.addressList-wrap {
	padding: 20rpx 0 155rpx;
	box-sizing: border-box;

	.addressList-item {
		// height: 198rpx;
		background-color: rgba(255, 255, 255, 1);
		margin-bottom: 10rpx;
		width: 750rpx;
		display: flex;
		flex-direction: column;
		position: relative;
		padding: 40rpx 44rpx;
		box-sizing: border-box;
		.addressList-item-default {
			width: 65rpx;
			height: 34rpx;
			text-align: center;
			line-height: 34rpx;
			background-color: rgba(249, 247, 255, 1);
			color: rgba(128, 108, 255, 1);
			font-size: 22rpx;
			font-family: PingFangSC-Semibold;
			position: absolute;
			top: 0;
			left: 0;
		}

		.addressList-item-layer {
			z-index: auto;
			flex-direction: row;
			display: flex;
			align-items: center;
			.addressList-item-info {
				width: 550rpx;
				margin-right: 20rpx;
				.item-info-top {
					display: flex;
					align-items: center;
					.item-info-name {
						color: rgba(51, 51, 51, 1);
						font-size: 30rpx;
						font-family: PingFangSC-Medium;
						font-weight: bold;
	
					}
					.item-info-phone {
						color: rgba(102, 102, 102, 1);
						font-size: 24rpx;
						font-family: PingFangSC-Regular;
						margin-left: 12rpx;
					}
				}

				.item-info-address {
					display: block;
					color: rgba(51, 51, 51, 1);
					font-size: 28rpx;
					font-family: PingFangSC-Regular;
					margin-top: 10rpx;
				}
			}

			.addressList-item-cut {
				width: 1rpx;
				height: 74rpx;
				display: flex;
				align-items: center;
				background-color: #dddddd;
				// margin: 22rpx 0 0 26rpx;
			}
			.addressList-item-edit {
				width: 36rpx;
				height: 36rpx;
				margin-left: 44rpx;
				
			}
		}
	}
}

</style>
